<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
 	String path = request.getContextPath();
 	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 	request.setAttribute("path", path);
 	request.setAttribute("jsPath", path+"/js");
 	request.setAttribute("cssPath", path+"/css");
 	request.setAttribute("imagePath", path+"/image");
 %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Staff</title>

<!-- 页面js调用部分 -->
<!-- Mainly scripts -->
<!-- <script src="/js/jquery-2.1.1.min.js"></script> -->
<script src="/js/bootstrap.min.js?v=3.4.0"></script>
<script src="/js/jquery.metisMenu.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
<script src="/js/hplus.js?v=2.2.0"></script>
<script src="/js/pace.min.js"></script>


<!-- 树形文件 css&js -->
   <!--  <script type="text/javascript" src=" /js/jquery-1.7.2.js"></script> -->
    
	<link rel="stylesheet" type="text/css" href="/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stulesheet" type="text/css" href="/css/awesomeStyle/awesome.css"/>
    <link rel="stulesheet" type="text/css" href="/css/awesomeStyle/awesome.less"/>
    <link rel="stulesheet" type="text/css" href="/css/awesomeStyle/fa.less"/>
    <link rel="stylesheet" type="text/css" href="/css/metroStyle/metroStyle.css"/>
   
    <link rel="stylesheet" href="/css/demo.css" type="text/css">
	<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="/js/jquery.ztree.exedit.js"></script> 
	<!-- 树形文件 -->
	
	<!-- zyTable --> 
	<link rel="stylesheet" type="text/css" href="/plugs/bootstrap-ui/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="/plugs/button/css/component.css">
	<link rel="stylesheet" type="text/css" href="/plugs/checkbox/style.css">
	
			
	<!-- 加载zyPopup弹出层的样式 -->
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/demo.css"/>
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/dialog.css" />
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/dialog-sandra.css" />
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/css/zyPopup.css" />		
	<link rel="stylesheet" type="text/css" href="/css/table.css">
	<!-- 引用公共JS -->
		
	<script type="text/javascript" src="/plugs/paging/js/jquery.pagination.js"></script>
			
	<!-- 加载zyPopup弹出层的脚本 -->
	<script type="text/javascript" src="/plugs/zyPopup/plug/DialogEffects/js/modernizr.custom.js"></script>
	<script type="text/javascript" src="/plugs/zyPopup/plug/DialogEffects/js/classie.js"></script>
	<script type="text/javascript" src="/plugs/zyPopup/plug/DialogEffects/js/dialogFx.js"></script>
	<script type="text/javascript" src="/plugs/zyPopup/js/zyPopup.js"></script>
		
	<script type="text/javascript" src="/js/Staff.js"></script> 
	<!-- zyTable --> 
	
	<!-- css调用 -->
<link href="/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.3.0" rel="stylesheet">
<link href="/css/morris-0.4.3.min.css" rel="stylesheet">
<!-- Gritter -->
<link href="/css/jquery.gritter.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/style.css?v=2.2.0" rel="stylesheet">

<link rel="stylesheet" href="../resource/css/Staff.css">

<script type="text/javascript">


//分页
function search(){
	$("#pageNum").val(1);
	$('#userSearchForm').submit();
}

function goPage(pageNum){
	$("#pageNum").val(pageNum);
	$('#userSearchForm').submit();
}

$(function() {
	
	function checkstaffNum(){
		var $staffNum=$("form[name=myForm] input[name=staffNum]");
		var reg=/^[a-zA-Z0-9]{6,16}$/;
		if($.trim($staffNum.val())==""){
			alert("账号不能为空！");
			return false;
		}else if(!reg.test($staffNum.val())){
			alert("账号只能是字母或数字6-16位！且不能包含空格");
			return false;
		}else{
			var staffNum=$staffNum.val();
			$.ajax({
				  "url":"${path}/staff/isExitsNum",
				  "data":"staffNum="+staffNum,
				  "type":"Post",
				  "success":function(data){
					 if(data=="true"){
							$("input[name=add]").prop("disabled","disabled"); 
				    	}else{
				    		alert("该账号已被注册,请重新输入");
				    		$("input[name=add]").prop("disabled","");
				    		return false;
				    	}
				  }, 
				  "error":function(){
				       alert("用户名可以使用");
				    }
			 }); 
		}
	}
	
	
	
	
	 
	
	
	function checkName(){
			
		
		var $chnName=$("form[name=myForm] input[name=chnName]");
		var $surName=$("form[name=myForm] input[name=surName]");
		var $pwd=$("form[name=myForm] input[name=pwd]");
		var $mobile=$("form[name=myForm] input[name=mobile]");
		var reg=/^[a-zA-Z0-9]{6,16}$/;
		 if($.trim($chnName.val())==""){
			alert("中文名不能为空！");
			return false;
		}else if($.trim($surName.val())==""){
			alert("英文名不能为空！");
			return false;
		}else if($.trim($pwd.val())==""){
			alert("密码不能为空！");
			return false;
		
		}else{
			
			
			
		} 
		
	}   
	
	 
/*---------------------------------------------------------------------------------------------------------  */
	//提交按钮触发事件
	  $(function() {
			//光标离开框里的时候
			$("form[name=myForm]  input[name=staffNum]").blur(function(){
				checkstaffNum();
			});
			//光标在框里的时候
			$("form[name=myForm] input[name=staffNum]").focus(function(){
			     $(this).next().next().text("");
			}); 
			$("form[name=myForm]").submit(function(){
					return checkName();
				});
		}); 
	   
		$("input[name=checkAll]").click(function(){
			if($(this).prop("checked")==true){
				$("input[name=checkSelect]").prop("checked","true");
			}else{
				$("input[name=checkSelect]").prop("checked","");
			}
		});
		
		//点击添加按钮弹出注册框
		$("input[name=add]").click(function(){
		   $("#staffAdd").css("display","block");
			    
		}); 
		//点击注册框关闭按钮
		$("input[name=exit]").click(function(){
		   $("#staffAdd").css("display","none");
		});
	
	 
	
/*---------------------------------------------------------------------------------------------------------  */	
	/*-------------------------帐号不能重复-------------------------------*/
	
	// 初始化插件
	$(".table").table({
		"width"      : 500,
		"height"     : 250,
		"field"      : [{"id":"staffId", "name":"用户ID", "width":100},{"id":"staffNum", "name":"用户账号", "width":100},{"id":"chnName", "name":"中文名", "width":100},{"id":"surName", "name":"英文名", "width":100},{"id":"mobile", "name":"手机", "width":100},{"id":"sysroleName", "name":"角色名", "width":100},{"id":"createTime", "name":"创建日期", "width":150},{"id":"addSysrole","name":"绑定角色","width":150}],
		//"adaptive"   : true, // 数据源字段自适应宽度方式
		"adaptive"   : false, // 数据源字段自适应宽度方式
		"pattern"    : false, // 模式   true:字段方式获取数据   false:普通添加方式获取数据
		"example"    : true,  // 实例   当前创建的是否是model中的实例
		"check"      : true,  // 全选
		"number"     : true,  // 序号
		"edit"       : true,  // 编辑
		"del"        : true,  // 删除
		"allDel"     : true,  // 全部删除
		//"allAdd"     : true,  //添加
		//"filter"     : true,  // 过滤
		"paging"     : false,  // 分页条
		"zebra"      : true,  // 斑马线
		"dataTotal"  : 30,     // 数据总个数
		"rowsPerPage": 10,     // 一页多少行数据
		"pagingComplete": function(nNowPage){  // 翻页的回调方法

			console.info("用户定义翻页回调:");
			console.info(nNowPage);
			// 翻页添加数据
			var data = [];

			<c:forEach var="staff" items="${staffs}">
									data.push({"staffId":"${staff.staffId}","staffNum":"${staff.staffNum}","chnName":"${staff.chnName}","surName":"${staff.surName}","mobile":"${staff.mobile}","sysroleName":"${staff.sysroleName}","createTime":"${staff.createTimeStr}"});
								</c:forEach>
		
			$(".table").table("addData", data);
		},
		"delComplete": function(aRowId){  // 删除数据的回调方法
			if(aRowId.length>0){
				 var datas=[];
				for(var i=0;i<aRowId.length;i++){
					datas.push(aRowId[i].staffId);
				}  
				alert("date="+datas);
				$.ajax({
					type:"post",
					url:"/staff/del",
					traditional:true,
					data:{
						"dat":datas
					},
					success:function(data){
						$(".tips").text("提示:删除成功！");
						window.location.href="/staff/list";
					},
					error:function(){
						
					}
				});
			}  
		
			console.info("用户定义删除回调:");
			console.info(aRowId);
		},
		"editComplete": function(afterData,beforeData){  //编辑数据的回调方法
			
			console.info("用户定义编辑回调:");
			console.info(afterData);
			console.info(beforeData);
			
		}
		
	});
	

		// 初始化添加数据
		var data = [];
		
		<c:forEach var="staff" items="${staffs}" >
		data.push({"staffId":"${staff.staffId}","staffNum":"${staff.staffNum}","chnName":"${staff.chnName}","surName":"${staff.surName}","mobile":"${staff.mobile}","sysroleName":"${staff.sysroleName}","createTime":"${staff.createTimeStr}","addSysrole":"<a onclick='addSysrole(${staff.staffId})'>绑定角色</a>"});</c:forEach>
	
		$(".table").table("addData", data);
		
		$.fn.zTree.init($(".rightInfo .content_wrap .zTreeDemoBackground #treeDemo"), setting, zNodes);
		
		$(".button").hover(function(){
			$(this).css("cursor","Pointer");
		});
		
		$(".dialog__content .dialog-content div[id*=editPopup_CreateTime]").find("input[type=text]").attr("readonly","readonly");
		$(".dialog__content .dialog-content div[id*=editPopup_ID]").find("input[type=text]").attr("readonly","readonly"); 		
		
		
		
});

	//绑定角色
	function addSysrole(id){
		//alert("新增！");
		var url = "${path}/admin/userrole/showStaffAdd?staffId="+id;
		window.open(url,"addSysrole");
	}


</script>


<style type="text/css">
	.errorMsg{
		font-size: 16px;
		text-align: center;
		color:red;
		margin-left:10px;
	}
	.pagination{
		position:fixed;
		left:500px;
		top:450px;
	}
</style>

</head>

<body>
	<div id="wrapper">
		
		<!-- 左边导航 -->
		<%@ include file="../share/leftMenu.jsp" %>
				
		<div id="page-wrapper" class="gray-bg dashbard-1">
		<!-- 头部 -->
		<%@ include file="../share/head.jsp" %>

      <!--------------------------
        | 请将正文内部分写在这里 |
        -------------------------->
	<div class="box">    
	         
		    <article>
		       <div class="staffInfo">
		       		<!-- style控制zyTable最外层样式,如果需要改变宽度可以设置width -->
		           	<div style="width:1100px;height:400px;position: absolute;margin-left:0%;margin-top:150px;">
						<div class="table"></div>
					</div>
		        	
					<div class="tips">
					<c:if test="${not empty message}">
						${message}
					</c:if>
					</div>
			   </div>
		    </article>
		    
			
		  	<div class="anniu">
				<input type="button" name="add" value="添加"  style="width: 100px ;float: left;">
			</div>
			<br>
			<br>
			<br>
			
			<form id="userSearchForm" action="${path}/staff/list" method="get">
				<label for="staffNum">用户帐号：</label><input type="text" name="staffNum" id="staffNum" value="${staffInfoVo.staffNum}"/>
				<label for="name">中文名：</label><input type="text" name="name" id="name" value="${staffInfoVo.name}"/>
				<br/>
				<label for="mobile">手机：</label><input type="text" name="mobile" id="mobile" value="${staffInfoVo.mobile}"/>
			
				<%--<label>创建时间</label><input type="text" value="${staffInfoVo.createTimeStr}" name="createTimeStr" id="begin"/>--<input type="text" name="endDate" value="${staffInfoVo.createTimeStr}" id="begin"/> 
				 <label for="deleteFlag">资源管理：</label><input type="text" name="deleteFlag" id="deleteFlag" value="${staffInfoVo.deleteFlag}"/>  
				 --%>
				<input type="hidden" id="pageNum" name="pageNum" value="${staffInfoVo.pageNum}"/>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
				<input type="button" value="查询" onclick="search();"/>
			</form>
		  <!-------------------- 注册列表 ---------------------->
		 <div id="staffAdd">
	        <h3 style="textalign:center;">用户注册</h3>
	        <hr>
	        <form action="${path}/staff/add" method="post" name="myForm">
	            
	            <input type="text" name="staffNum" id="staffNum" placeholder="请输入帐号">
				<label>: 用户账号</label>
				<br/>
	             
	            <input type="text" name="chnName" id="chnName" placeholder="请输入姓名">
	            <label>: 中文姓名</label>
	            <br/>
	            
	            <input type="text" name="surName" id="surName" placeholder="请输入英文名">
	            <label>: 英文全名</label>
	            <br/>
	            
	            <input type="password" name="pwd" id="pwd" placeholder="请输入密码">
	            <label>: 密码</label>
	            <br/>
	            
	            <input type="text" name="mobile" id="mobile" placeholder="请输入手机号">
	            <label>: 手机</label>
	            <br/>
	            <hr>
		        <input class="button" type="submit" value="注册">
	            <input class="button" type="reset" value="重置">
	            <input class="button" type="button" value="关闭" name="exit">
	        </form>
	        
	     </div>
	     
	     <div class="col-sm-7">
			<div class="dataTables_paginate paging_simple_numbers"
				id="example2_paginate">
				<ul class="pagination">
					<li class="paginate_button next"id="example2_next">
					<a href="javaScript:void(0)" onclick="goPage(${staffInfoVo.pageNum-1})">上一页</a></li>
					<li class="paginate_button ">第<input id="myPageNum" value="${staffInfoVo.pageNum}"/>页</li>
					<li class="paginate_button next" id="example2_next">
					<a href="javascript:void(0)" onclick="goPage(${staffInfoVo.pageNum+1})">下一页</a>
					</li>
					<li class="paginate_button next" id="example2_next">
					<a href="javaScript:void(0)" onclick="goPage($('#myPageNum').val())">跳转</a>
					</li>
				</ul>
							
			</div>
		</div>
	</div>
</div>
</body>
</html>
    
    
    
    